Detector Docs

English

Español

English

Español

Appearance

Horizontal Scroll Test — How It Works ​

This test detects when a page generates horizontal scroll (simultaneous horizontal and vertical scrollbar) when 400% zoom is applied.

Test Objective ​

Verify that web page content does NOT require horizontal scrolling when:

  • The viewport has an effective width of 320px
  • 400% zoom is applied in the browser

Step-by-Step Process ​

The test executes a sequence of 3 automated steps:

Step 1: Set Base Viewport ​

  • The browser is configured with a standard window size of 1280x720 pixels
  • This is the starting point before applying zoom

Step 2: Apply 400% Zoom ​

  • 400% zoom is applied in the browser, effectively reducing the viewport by 4x
  • Important calculation: 1280px ÷ 4 = 320px effective width

Step 3: Programmatic Verification ​

  • This is the critical validation step
  • Programmatically checks whether a horizontal scrollbar exists in the page <body>
  • Detects if scrollWidth > clientWidth (scrollable width is greater than viewport width)

Success Criteria ​

Test PASSES when: ​

  • NO horizontal scrollbar appears at the page level when 400% zoom is applied
  • Content automatically reorganizes (reflows) to fit the 320px width
  • All elements are accessible without horizontal scrolling at the page level

Test FAILS when: ​

  • A horizontal scrollbar appears at the page level
  • The user needs to scroll horizontally to see the full content
  • Elements are clipped or outside the viewport creating horizontal scroll at the page level

Exceptions ​

This criterion does NOT apply to:

  • Images requiring two-dimensional layout (maps, diagrams)
  • Complex data tables
  • Embedded videos or games

How to Run the Test Manually ​

To reproduce the test manually in the browser:

  1. Open the page to be tested in 2 different Chrome windows
  2. In the first window, adjust the viewport to 1280px wide. You can use https://whatismyviewport.com/
  3. In the second window, adjust the viewport to 320px wide. You can use DevTools by disabling responsive mode and adjusting the viewport
  4. Check whether a horizontal scrollbar appears at the page level

Known Limitations ​

In the screenshot returned by the extension, scroll bars are not visible.